<template>
  <div>
    <header>
      <span class="back" @click="find">
        <svg
          t="1631256917689"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2263"
          width="200"
          height="200"
        >
          <path
            d="M652.519 165.796c-134.397-134.395-352.323-134.395-486.721 0-134.397 134.41-134.397 352.332 0 486.727 130.861 130.858 340.852 134.249 475.878 10.316L937.84 959 959 937.841 662.835 641.666C786.784 506.657 783.379 296.655 652.519 165.796zM631.358 631.363c-122.517 122.515-321.884 122.515-444.4 0-122.517-122.514-122.517-321.878 0-444.393 122.517-122.529 321.884-122.529 444.4 0C753.875 309.485 753.875 508.849 631.358 631.363z"
            p-id="2264"
          ></path></svg
      ></span>

      <span class="biao">{{ $route.query.name }}</span>
      <span class="people" v-if="peopleA==true" @click="people"
        ><svg viewBox="0 0 28 33" id="user">
          <path
            fill-rule="evenodd"
            d="M20.798 19.289c2.636-2.002 4.215-5.091 4.215-8.437 0-5.886-4.845-10.647-10.808-10.647S3.397 4.966 3.397 10.852c0 3.345 1.578 6.433 4.212 8.435l.264-2.678C4.358 18.32 1.591 21.403.168 25.187l1.478.556v-1.579c-1.485.73-1.485.73-1.501 1.079-.054.188-.054.188-.069.278a2.58 2.58 0 0 0-.026.229 9.112 9.112 0 0 0-.019.4c-.008.265-.014.617-.018 1.039-.005.511-.006 1.037-.006 1.451v.027c-.004 1.732 1.41 3.129 3.154 3.129h22.082a3.18 3.18 0 0 0 3.172-3.153l.011-1.305.008-.897.003-.296.001-.083v-.022-.006-.001l.002-.278-.093-.262c-1.385-3.918-4.203-7.122-7.812-8.88l.263 2.678zm-1.911-2.516l-2.045 1.553 2.309 1.125c2.856 1.392 5.106 3.949 6.218 7.093l-.09-.54V26.033l-.001.083-.003.296-.008.897-.011 1.305c0 .01-.011.021-.013.021H3.161c-.007 0 .005.011.005.032v-.031c0-.404.001-.92.006-1.418.004-.4.01-.732.017-.969.004-.121.008-.212.012-.262l-.006.043c-.009.06-.009.06-.058.229-.01.336-.01.336-1.49 1.063H2.74l.385-1.024c1.141-3.035 3.35-5.495 6.131-6.849l2.309-1.124-2.045-1.554c-1.859-1.412-2.964-3.576-2.964-5.92 0-4.129 3.418-7.488 7.649-7.488s7.649 3.359 7.649 7.488c0 2.344-1.106 4.509-2.966 5.921z"
            class="path1"
          ></path></svg
      ></span>
      <span class="qie" v-if="peopleA==false" @click="gonext">登录|注册</span>
    </header>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <ul>
            <li v-for="(i, item) in arrtu" :key="item">
              <img
                :src="i.image_url | imgfilterSwiper"
                alt=""
                @click="classify(item)"
              />
              <span>{{ i.title }}</span>
            </li>
          </ul>
        </div>
        <div class="swiper-slide">
          <ul>
            <li v-for="(i, item) in arrtu2" :key="item">
              <img
                :src="i.image_url | imgfilterSwiper"
                alt=""
                @click="classify1(item)"
              />
              <span>{{ i.title }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <goodsList></goodsList>
    <Footer></Footer>
  </div>
</template>
<script>
import Swiper from "swiper";
import { swiper } from "../../API/index";
import star from "../star/star.vue";
import goodsList from "../List/goodsList.vue";
import Footer from "../footer/footer.vue";

export default {
  components: {
    Star: star,
    goodsList,
    Footer,
  },
  data() {
    return {
      arrtu: [],
      arrtu2: [],
      zhi: "登录/注册",
      peopleA: false,
    };
  },

  async mounted() {
    var lunbo = await swiper();
    if (lunbo.data) {
      for (var i = 0; i < 8; i++) {
        this.arrtu.push(lunbo.data[i]);
      }
      for (i = 8; i < 16; i++) {
        this.arrtu2.push(lunbo.data[i]);
      }
    }
    if (localStorage.username) {
      this.peopleA = true;
    } else {
      this.peopleA = false;
    }
    new Swiper(".swiper-container", {
      //   loop: true,
      // 如果需要分页器
      //   pagination: ".swiper-pagination",
      // 如果需要前进后退按钮
      nextButton: ".swiper-button-next",
      prevButton: ".swiper-button-prev",
      // 如果需要滚动条
      // scrollbar: '.swiper-scrollbar',
      //如果需要自动切换海报
      autoplay: {
        // delay: 1000,//时间 毫秒
        // disableOnInteraction:false,//用户操作之后是否停止自动轮播默认true
      },
    });
  },
  methods: {
    people() {
      this.$router.push("/Myusername");
    },
    gonext() {
      this.$router.push("/loginX");
    },
    find() {
      this.$router.push("/find");
    },
    classify(item) {
      this.$router.push({
        path: "/Classify",
        query: { title: this.arrtu[item].title },
      });
    },
    classify1(item) {
      this.$router.push({
        path: "/Classify",
        query: { title: this.arrtu2[item].title },
      });
    },
  },
};
</script>

<style scoped >
header span svg {
  width: 2rem;
  height: 2rem;
}
header span {
  display: flex;
  justify-content: center;
  align-items: center;
}
.s1s {
  width: 20%;
  float: left;
}
.s2s {
  color: #333;
  float: right;
  width: 60%;
  height: 2rem;
}
.mingzi {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

header {
  color: #fff;
  background-color: #3190e8;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 2.95rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.3rem;
}

header span {
  font-size: 1rem;

  color: #fff;
  text-align: center;
  font-weight: 700;
}

.biao {
  width: 50%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-size: 1rem;
  display: block;
}
ul {
  margin-top: 3rem;
  width: 100%;
  height: 15rem;
}
li {
  display: flex;
  float: left;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: 25%;
  height: 40%;
}
li img {
  margin-bottom: 0.3rem;
  width: 2.8rem;
  height: 2.8rem;
}

.swiper-container {
  width: 100%;
  height: 15rem;
}

.swiper-wrapper .swiper-slide {
  width: 100% !important;
  height: 15rem;
  text-align: center;
}
.swiper-wrapper {
  width: 100% !important;
}

.swiper-container {
  margin-top: 3rem;
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  height: calc((100% - 30px) / 2);
  display: flex;

  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
</style>


